<template>
  <a-row style="padding: 10px;">
    <a-col span="24" style="margin: 10px 0">
      <a-button type="primary" @click="addOrg">新增组织机构</a-button>
    </a-col>
    <a-col span="24">
      <a-table :dataSource="treeData" :columns="columns" :rowSelection="rowSelection"
               size="small" bordered :rowKey="record => record.orgId">
        <template slot="operation" slot-scope="text, record, index">
          <div>
            <span>
              <a v-if="record.state == 1 || record.state == 0" @click="() => updateOrg(record)">编辑</a>
              <a v-if="record.state == 1 || record.state == 0" @click="() => showPower(record)">授权信息</a>
              <!--<a v-if="record.state == 1" @click="() => lockOrg(record)">冻结</a>-->
              <a v-if="record.state == 1" @click="() => delOrg(record)">删除</a>
              <!--<a v-if="record.state == 2" @click="() => lockOrg(record)">解冻</a>-->
            </span>
          </div>
        </template>
      </a-table>
    </a-col>
    <a-modal v-model="model.visible" :title="model.title">
      <a-form :form="model.form">
        <a-form-item label="组织机构名称" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入组织机构名称！"
                   v-decorator="['orgName', {rules: [{ required: true, message: '请输入组织机构名称！'}]}]"/>
        </a-form-item>
        <a-form-item label="组织机构代码" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入组织机构代码！"
                   v-decorator="['orgCode', {rules: [{ required: true, message: '请输入组织机构代码！'}]}]"/>
        </a-form-item>
        <a-form-item label="排序号" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入排序号！"
                   v-decorator="['num', {rules: [{ required: true, message: '请输入排序号！'}]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="model.loading" @click="addOrUpdateOrgOk">
          确定
        </a-button>
        <a-button key="back" @click="model.visible = false">取消</a-button>
      </template>
    </a-modal>
    <a-modal v-model="modelPower.visible" width="1200px">
      <OrgPower :org="selectData"/>
      <template slot="footer">
        <a-button key="back" @click="modelPower.visible = false">取消</a-button>
      </template>
    </a-modal>
  </a-row>
</template>

<script>
  import OrgPower from './OrgPower'

  export default {
    name: 'Org',
    components: {
      OrgPower
    },
    data () {
      return {
        height: this.$store.state.screenHeight,
        labelCol: {span: 6},
        wrapperCol: {span: 15},
        model: {
          labelCol: {span: 7},
          wrapperCol: {span: 12},
          loading: false,
          visible: false,
          title: '添加组织机构',
          form: this.$form.createForm(this),
          data: {}
        },
        loading: false,
        treeData: [],
        data: {},
        rowSelection: {
          type: 'radio',
          selectedRowKeys: [],
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectData = selectedRows[0]
            this.rowSelection.selectedRowKeys = selectedRowKeys
          }
        },
        columns: [
          {
            title: '组织机构名称',
            dataIndex: 'orgName',
            sorter: true,
            width: 300
          }, {
            title: '组织机构代码',
            dataIndex: 'orgCode',
            sorter: true
          }, {
            title: '组织机构类型',
            dataIndex: 'orgType'
          }, {
            title: '排序号',
            dataIndex: 'num',
            sorter: true
          }, {
            title: '状态',
            dataIndex: 'state',
            sorter: true,
            customRender: (text, record, index) => {
              return text === 2 ? '锁定' : '正常'
            }
          }, {
            title: '操作',
            scopedSlots: {customRender: 'operation'}
          }
        ],
        selectData: {},
        modelPower: {
          visible: false
        }
      }
    },
    mounted () {
      this.getOrgTree()
    },
    methods: {
      // 查询组织机构树
      getOrgTree () {
        this.loading = true
        this.http.post('upmsApi', '/org/getOrgTree', {}).then((res) => {
          if (res.success) {
            this.treeData = res.rows
          }
          this.loading = false
        })
      },
      // 添加组织机构
      addOrg () {
        if (this.rowSelection.selectedRowKeys.length === 0) {
          this.$message.error('请先选择上级组织机构！')
          return
        }
        this.model.visible = true
        this.model.title = '添加组织机构'
        this.model.data = {}
        this.model.form.setFieldsValue({
          orgName: null,
          orgCode: null,
          num: null
        })
      },
      // 更新组织机构
      updateOrg (record) {
        if (record.orgId == null) {
          this.$message.error('请先选择组织机构！')
          return
        }
        this.model.visible = true
        this.model.title = '修改组织机构'
        this.selectData = record
        setTimeout(() => {
          this.model.form.setFieldsValue({
            orgName: this.selectData.orgName,
            orgCode: this.selectData.orgCode,
            num: this.selectData.num
          })
        }, 100)
      },
      // 删除组织机构
      delOrg (record) {
        if (record.orgId == null) {
          this.$message.error('请先选择组织机构！')
          return
        }
        const that = this
        this.$confirm({
          title: '删除组织机构！?',
          onOk () {
            return new Promise((resolve, reject) => {
              console.log('删除')
              that.http.post('upmsApi', '/org/delOrg', {orgId: record.orgId}).then((res) => {
                if (res.success) {
                  that.$message.info(res.message)
                  that.getOrgTree()
                  that.selectData = {}
                  that.rowSelection.selectedRowKeys = []
                  resolve(res.message)
                } else {
                  that.$message.error(res.message)
                  reject(res.message)
                }
              })
            })
          }
        })
      },
      // 添加或者更新组织机构
      addOrUpdateOrgOk (e) {
        e.preventDefault()
        this.model.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            this.model.loading = true
            let url = this.model.title === '添加组织机构' ? '/org/addOrg' : '/org/updateOrg'
            this.http.post('upmsApi', url, {
              orgId: this.model.title === '添加组织机构' ? null : this.selectData.orgId,
              parentId: this.model.title === '添加组织机构' ? this.selectData.orgId : null,
              ...values
            }).then((res) => {
              if (res.success) {
                this.$message.info(res.message)
                this.getOrgTree()
                this.selectData = {}
                this.rowSelection.selectedRowKeys = []
              }
              this.model.loading = false
              this.model.visible = false
            })
          }
        })
      },
      // 显示成员信息
      showPower (record) {
        console.log('showMember', record)
        this.selectData = record
        this.modelPower.visible = true
      }
    }
  }
</script>

<style scoped>

</style>
